<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>cachePage</title>
    <link rel="stylesheet" href="cachepage.css?3">
    <script src="cachepage.js"></script>
    <style>
        .cachepagedemo {
            display: flex;
            justify-content: space-between;
            border: 5px solid #eeeeee;
            padding-bottom: 10px;
        }
        
        #main_menu1 {
            width: 80px;
            margin: 0;
            list-style: square;
        }
        
        .main {
            width: 100%;
        }
    </style>
</head>

<body>
    <div>
        <h2>CachePage</h2>
        <p>缓存页,每显示一个页面时,缓存当前的页面</p>
        <div class="cachepagedemo">
            <ul id="main_menu1">
                <li>
                    <a href="javascript:void(0)"></a>
                </li>
                <li>
                    <a href="javascript:void(0)"></a>
                </li>
                <li>
                    <a href="javascript:void(0)"></a>
                </li>
                <li>
                    <a href="javascript:void(0)"></a>
                </li>
                <li>
                    <a href="javascript:void(0)"></a>
                </li>
                <li>
                    <a href="javascript:void(0)"></a>
                </li>
                <li>
                    <a href="javascript:void(0)"></a>
                </li>
                <li>
                    <a href="javascript:void(0)"></a>
                </li>
                <li>
                    <a href="javascript:void(0)"></a>
                </li>
                <li>
                    <a href="javascript:void(0)"></a>
                </li>
                <li>
                    <a href="javascript:void(0)"></a>
                </li>
            </ul>
            <div class="main">
                <div class="tabsbox" id="tabsbox1">
                    <a class="tabsbox-left"></a>
                    <nav class="tabsbox-navbox">
                        <div class="tabsbox-nav"></div>
                    </nav>
                    <a class="tabsbox-right"></a>
                    <span class="tabsbox-menutitle">功能</span>
                    <div class="tabsbox-menugroup">
                        <span class="tabsbox-goto-active">定位当前页</span>
                        <span class="tabsbox-close-all">关闭全部</span>
                        <span class="tabsbox-close-other">关闭其它</span>
                    </div>
                </div>
                <div id="mainbox"></div>
            </div>
        </div>
        <h3>实现逻辑</h3>
        <p>
            使用document.createDocumentFragment这个方法,将当前页面移到 "片段"中,"片段"并不在document中,所以不会引起混乱.保持一个对它的引用,在显示曾经打开过的页面时, 再添加到document中即可.如此可实现不用iframe的方案.
        </p>
        <h3>选项卡HMTL</h3>
        <pre>
        &lt;div class="tabsbox" id="tabsbox1"&gt;
            // 向左按钮
            &lt;a class="tabsbox-left"&gt;&lt;/a&gt;

            // 导航区
            &lt;nav class="tabsbox-navbox"&gt;&lt;div class="tabsbox-nav"&gt;&lt;/div&gt;&lt;/nav&gt; 

            // 向右按钮
            &lt;a class="tabsbox-right"&gt;&lt;/a&gt;

            // 功能按钮组
            &lt;span class="tabsbox-menutitle"&gt;功能&lt;/span&gt;
            &lt;div class="tabsbox-menugroup"&gt;
                &lt;span class="tabsbox-goto-active"&gt;定位当前页&lt;/span&gt;
                &lt;span class="tabsbox-close-all"&gt;关闭全部&lt;/span&gt;
                &lt;span class="tabsbox-close-other"&gt;关闭其它&lt;/span&gt;
            &lt;/div&gt;
        &lt;/div&gt;
        </pre>
        <h3>功能与特点</h3>
        <ul>
            <li>点击左侧菜单时,缓存当前页面,新增选项卡,显示新页面.如果菜单已经打开过,则显示对应选项卡.</li>
            <li>导航按钮:每个选项卡对应一个缓存页面,当选项卡超出可视范围后,使用前进后退按钮滚动选项卡框</li>
            <li>当被点击的选项卡靠近选项卡框的两端,则调整该选项卡到中间位置</li>
            <li>关闭所有选项卡.关闭除活动选项卡外的.定位当前活动选项卡,当其不在可视范围内时.</li>
            <li>当前活动页面不缓存,页面由缓存到显示后,其对应缓存会删除</li>
            <li>缓存页面使用document.createDocumentFragment,加入其中的DOM会从当前文档中脱离.用以替代经典的iframe方法</li>
            <li>经过测试,一个填写过的表单页面在放入文档片段对象之后,再取出来时,其状态不变.</li>
        </ul>
        <h3>用途</h3>
        <p>该功能用于一个经典的场景,在管理系统中,左侧菜单,右侧显示页面.点击左侧菜单时,打开多个页面.</p>
        <p>为了避免页面冲突,通常是使用iframe来解决的,这个方案用于替代iframe.</p>
        <h2>用法</h2>
        <p>在点击菜单时,调用cachepage.load方法,会将当前活动页面加入到缓存中,然后显示菜单对应页面到显示区</p>
    </div>

    <script>
        // 选项卡框Dom对象
        let tabsDom = document.getElementById('tabsbox1');
        // 显示内容Domc对象
        let contDom = document.getElementById('mainbox');
        // cachepage
        let cpg = cachepage(tabsDom, contDom);
        // 左侧菜单绑定事件
        let menus = ['MainPage', '人员管理', '部门管理', '订单管理', '资料管理', '报表管理', '信息查询', '日志查询', '财务会计', '权限设置', '系统设置'];
        let menubox = document.getElementById('main_menu1');
        menubox.querySelectorAll('a').forEach((item, index) => {
            item.innerHTML = menus[index];
            // 
            item.onclick = () => {
                let cacheDom = cpg.load(index, menus[index]);
                contDom.innerHTML = '';
                if (cacheDom) {
                    contDom.append(cacheDom);
                } else {
                    contDom.innerHTML = `<h1>${menus[index]}</h1>`;
                };
            };
        });
        // 默认载入MainPage页
        menubox.querySelector('a').click();
    </script>

</body>

</html>